<template>
    <view class="page-wallet position-r">
        <view class="page-wallet__bg full-w position-a">
            <image src="@/static/wallet_bg.png" mode="widthFix" style="width:100%"></image>
        </view>
        <view class="page-wallet__header position-r">
            <u-navbar
                title="我的钱包"
                :autoBack="true"
                bgColor="rgba(0,0,0,0)"
                :titleStyle="{color:'#fff'}"
                leftIconColor="#fff"
            >
            </u-navbar>
            <view class="mr-l-76">
                <view class="font28 lh-40 color-white">钱包余额（元）</view>
                <view class="font52 lh-74 color-white">{{walletInfo?.balance}}</view>

                <view class="flex flex-start mr-t-30">
                    <u-button type="primary" :customStyle="{width:'152rpx',height:'54rpx',marginLeft:0}" shape="circle" color="#35BE65"  text="提现" @click="cashOut" v-if="userPermission.isWithdrawal == 1"></u-button>
                </view>
                
                  
            </view>
              
                
        </view>
        
          
        <view class="page-wallet__body position-r mr-t-48 mr-v-24">
            
            <view class="bg-white border8  pd-v-16 mr-t-20">
                <view class="flex pd-h-40 flex-center border-b" @click="incomeRecord">
                    <view class="flex-1 flex flex-center">
                        <view class="flex-1 font32 lh-48 color-default">
                            收益明细
                        </view>
                        <u-icon name="arrow-right" size="14" color="#AAAAAA"></u-icon>
                    </view>
                    
                </view>

                <view class="flex pd-h-40 flex-center border-b" @click="cashOutRecord">
                    <view class="flex-1 flex flex-center">
                        <view class="flex-1 font32 lh-48 color-default">
                            提现明细
                        </view>
                        <u-icon name="arrow-right" size="14" color="#AAAAAA"></u-icon>
                    </view>
                    
                </view>
            </view>
              
            
              
        </view>
          
        
        <reChargeComponent ref="reCharge" @confirm="confirm"></reChargeComponent>
          
    </view>
</template>

<script setup>
import { useStore } from '@/store/index.js';
import { ref, reactive, onMounted, nextTick } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { getBalanceAndWithdrawalRate, agentGetUserInfo } from '@/api/proxy.js'

import reChargeComponent from '@/components/reCharge.vue'
const reCharge = ref(null)

const store = useStore();
const walletInfo = ref({})
const userPermission = ref({})

onShow(() => {
  getGetBalanceAndWithdrawalRate()
  agentGetUserInfo().then(res => {
        if(res.code == 200) {
            userPermission.value = res.data
        }
    })
})



onLoad(() => {
    

})

const getGetBalanceAndWithdrawalRate = () => {
    getBalanceAndWithdrawalRate({
        userId: store?.user?.userInfo2.userId
    }).then(res => {
        if (res.code == 200) {
            walletInfo.value = res.data
        }
    })
}

const charge = () => {
    reCharge.value.show()
}

const incomeRecord = () => {
    uni.navigateTo({
        url: '/sub_shop/pages/incomeRecord/incomeRecord'
    })
}

const cashOutRecord = () => {
    uni.navigateTo({
        url: '/sub_shop/pages/cashOutRecord/cashOutRecord'
    })
}


const cashOut = () => {
    uni.navigateTo({
        url: '/sub_shop/pages/cashOut/cashOut'
    })
}
</script>

<style scoped lang="scss">
.page-wallet {
    background: #F7F7F7;
    min-height:100vh;

    .page-wallet__bg {
        height:404rpx;
        left:0;
        top:0;
        z-index: 1;
    }

    .page-wallet__header {
        z-index: 2;
        padding-top:196rpx;

        .avatar {
            width: 108rpx;
        }
        
    }

    .page-wallet__body {
        z-index: 2;

        .border-b {
            border-bottom: 1px solid #E4F2EC;
        }
    }
}
</style>
